<template>
	<div>
		<!-- 面包屑导航 -->
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{ path: '/' }">运营</el-breadcrumb-item>
			<el-breadcrumb-item>添加满减活动</el-breadcrumb-item>
		</el-breadcrumb>
        <el-card>
			<fieldset>
		<el-form label-width="70px" status-icon :rules="rules" :model="FullReductionForm" ref="FullReductionForm">
			<el-form-item label="活动标题" label-width="100" prop="title">
				<el-input v-model="FullReductionForm.title" style="width:300px"></el-input>
			</el-form-item>
			<el-form-item label="开始时间" label-width="100" prop="startTime">
				<el-date-picker v-model="FullReductionForm.startTime" type="datetime" placeholder="选择日期时间"></el-date-picker>
			</el-form-item>
			<el-form-item label="结束时间" label-width="100" prop="endTime">
				<el-date-picker v-model="FullReductionForm.endTime" type="datetime" placeholder="选择日期时间"></el-date-picker>
			</el-form-item>
			<el-form-item label="上线/下架" label-width="100">
				<el-radio-group v-model="FullReductionForm.status">
					<el-radio label="1">上架</el-radio>
					<el-radio label="0">下架</el-radio>
				</el-radio-group>
			</el-form-item>
            <el-form-item label="优惠条件">
				
			</el-form-item>


		</el-form>
		</fieldset>
		</el-card>
	</div>
</template>

<script>
export default {
	data(){
			var validateTitle = (rule, value, callback) => {
			let filterRule = /[^\u4e00-\u9fa5a-zA-Z0-9\w]/g
			//let hanziRule=/[^\u4e00-\u9fa5]/g
			let shuzi = /^[0-9]/g
			if (value === "") {
				callback(new Error("请输入标题"))
			}
			if (filterRule.test(value)) {
				callback(
					new Error(
						"含有非法字符(只能输入中文或字母,并且长度不能超过30个)"
					)
				)
			}
			if (shuzi.test(value)) {
				callback(new Error("不能以数字开头"))
			}
			if (value.length < 1) {
				callback(new Error("最少输入一个字母或汉字"))
			}
			if (value.length > 30) {
				callback(new Error("长度不能超过30"))
			} else {
				callback()
			}
		}
		var validateStartTime = (rule, value, callback) => {
			if (value === "") {
				callback(new Error("请选择开始日期"))
			} else {
				callback()
			}
		}

		var validateEndTime = (rule, value, callback) => {
			if (value === "") {
				callback(new Error("请选择截止日期"))
			}
			if (value <= this.activityForm.startTime) {
				callback(new Error("活动截止日期不能小于开放日期"))
			} else {
				callback()
			}
		}
		return{
		 FullReductionForm:{
			 	title: "",
				startTime: "",
				endTime: "",
				status: "1",
		 },
		 rules:{
			 title: [
					{
						required: true,
						validator: validateTitle,
						trigger: "blur",
					},
				],
				endTime: [
					{
						required: true,
						validator: validateEndTime,
					},
				],
				startTime: [
					{
						required: true,
						validator: validateStartTime,
					},
				],
		 }
		 
		}
	},
	methods:{

	},
	created(){
    
	}
}
</script>

<style scope>
 fieldset {
    /* 表单页面居中，宽度50% ,legend颜色设置，legend圆角*/
    border:2px ;  text-align:left; border-radius: 8px;margin: 0 auto;width:50%;
  }
  fieldset1 {
    /* 表单页面居中，宽度50% ,legend颜色设置，legend圆角*/
    border:2px solid #DCDFE6;  text-align:left; border-radius: 8px;margin: 0 auto;width:50%;
  }
</style>